<!-- 
@name: 客服
-->
<template>
	<div id="service" class="page">
		<div class="content flex-column flex-center">
			<div class="top">
				<img class="img1" src="@/assets/images/kf.png" alt="">
				<div class="headLogo">
					<img :src="dataList.servicePhoto" alt="">
				</div>
			</div>
			<div class="center">
				<div class="flex-row flex-alignCenter">
					<div class="text1">微信号：{{dataList.serviceWxName}}</div>
					<div class="text2" @click="copyTemplate(dataList.serviceWxName)">复制</div>
				</div>
				<img class="qrCode" :src="dataList.serviceQrCode" alt="">

			</div>
		</div>
	</div>
</template>
<script>
import Qs from 'qs'; //引入qs  时axios的自带模块
export default {
	name: 'app',
	components: {},
	data() {
		return {
			searchKey: '',
			apiName: '',
			dataList: {},
		};
	},

	created() {
		this.getData();
	},
	methods: {
		// 复制模板内容
		copyTemplate(value) {
			this.copyToClipboard(value); // 需要复制的文本内容

			this.$notify({ type: 'success', message: '操作成功' });
		},

		// 点击复制到剪贴板函数
		copyToClipboard(content) {
			if (window.clipboardData) {
				window.clipboardData.setData('text', content);
			} else {
				(function (content) {
					document.oncopy = function (e) {
						e.clipboardData.setData('text', content);
						e.preventDefault();
						document.oncopy = null;
					};
				})(content);
				document.execCommand('Copy');
			}
		},
		getData() {
			var params = {};
			this.$myApi['getConfig_index'](params).then((res) => {
				if (res.code == 0) {
					this.dataList = res.result;
				} else {
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
@color-blue: #00a0e9;
@shadow:0px 1px 7px 2px rgba(0, 0, 0, 0.03);
.page {
	padding-left: 0.2rem;
	padding-right: 0.2rem;
}
#service {
	background: #f8f8f8;
	min-height: 100vh;
	.content {
		padding: 0.2rem;
		margin-top: 0.2rem;
		background: #fff;
		border-radius: 10px;
		.top {
			height: 3rem;
			width: 6.5rem;
			position: relative;
			margin-bottom: 1.3rem;
			.img1 {
				height: 3rem;
				width: 6.5rem;
			}
			.headLogo {
				position: absolute;
				left: 2.7rem;
				bottom: -0.55rem;
				img {
					width: 1.1rem;
					height: 1.1rem;
					border: 0px solid #ededed;
					border-radius: 50%;
				}
			}
		}
		.center {
			.text1 {
				font-size: 0.32rem;
				font-weight: bold;
				color: #333333;
			}
			.text2 {
				background: #f5f5f5;
				border-radius: 5px;
				font-size: 0.24rem;
				color: #666666;
				padding: 0.1rem;
				margin-left: 0.2rem;
			}
			.qrCode {
				width: 3.2rem;
				height: 3.2rem;
				margin-top: 0.7rem;
			}
		}
	}
}
</style>